<template>
	<div>
		<div class="login-container">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

	</div>
</template>
<script>
	// import ax from 'axios'
	//axios  post 请求 Content-type  json格式
	// ax.defaults.headers.post['Content-Type'] = 'application/json;charset=utf8';
	import qs from 'qs'

	export default {

		data() {
			var checkName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('名字不能为空'));
				} else {
					callback();
				}

			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};

			return {
				ruleForm: {
					username: 'admin',
					password: '123456',

				},
				rules: {
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],

					username: [{
						validator: checkName,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// alert('submit!');
						alert(this.ruleForm.username + "-----------" + this.ruleForm.password)
						// 	//参数，拼接到路径后面
						this.$axios.post("t-user/login", qs.stringify(this.ruleForm)).then(res => {

							//存

							//认证成功之后 用户名和密码  存到localStor  this.ruleFrom
							//localStor里面不能直接存对象，Json 字符串
							localStorage.setItem("user", JSON.stringify(this.ruleForm));
							
							//(自定义指令)后台自定义的一个roles
							localStorage.setItem("roles",JSON.stringify(res.t));
							this.$router.push({
								path: "/aaa"
							});


							console.log(res.data);
						})
						//Json
						// ax.post("http://localhost:8888/login",JSON.stringify(this.ruleForm)).then(res=>{
						// 	//
						// 	console.log(res.data);
						// })


						// this.$router.push({
						// 	name: "about"
						// });
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.login-form {
		width: 350px;
		margin: 160px auto;
		/* 上下间距160px，左右自动居中*/
		background-color: rgb(255, 255, 255, 0.8);
		/* 透明背景色 */
		padding: 30px;
		border-radius: 20px;
		/* 圆角 */
	}

	/* 背景 */

	.login-container {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url("~@/assets/timg.png");
	}

	/* 标题 */
	.login-title {
		color: #303133;
		text-align: center;
	}
</style>
